<template>
  <div class="menu-table-container">
    <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :pagination="false" bordered size="middle"
      rowKey="id" :scroll="{ x: 1200 }">
      <!-- 自定义列插槽 -->
      <template #bodyCell="{ column, record }">
        <!-- 图标列 -->
        <template v-if="column.key === 'icon'">
          <component :is="getIconComponent((record as Menu).icon)" />
        </template>

        <!-- 类型列 -->
        <template v-if="column.key === 'type'">
          <a-tag v-if="(record as Menu).type === MenuType.DIRECTORY" color="blue">
            {{ $t('menu.directory') }}
          </a-tag>
          <a-tag v-else-if="(record as Menu).type === MenuType.MENU" color="green">
            {{ $t('menu.menu') }}
          </a-tag>
          <a-tag v-else-if="(record as Menu).type === MenuType.BUTTON" color="orange">
            {{ $t('menu.button') }}
          </a-tag>
        </template>

        <!-- 可见性列 -->
        <template v-if="column.key === 'isVisible'">
          <a-tag :color="(record as Menu).isVisible ? 'success' : 'error'">
            {{ (record as Menu).isVisible ? $t('common.yes') : $t('common.no') }}
          </a-tag>
        </template>

        <!-- 状态列 -->
        <template v-if="column.key === 'status'">
          <a-tag :color="(record as Menu).status === 1 ? 'success' : 'error'">
            {{ (record as Menu).status === 1 ? $t('common.enabled') : $t('common.disabled') }}
          </a-tag>
        </template>

        <!-- 操作列 -->
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" v-if="(record as Menu).type !== MenuType.BUTTON"
              @click="handleAdd((record as Menu).id)">
              {{ $t('menu.addSub') }}
            </a-button>
            <a-button type="link" size="small" @click="handleEdit(record as Menu)">
              {{ $t('common.edit') }}
            </a-button>
            <a-popconfirm :title="$t('common.deleteConfirm')" @confirm="handleDelete((record as Menu).id)">
              <a-button type="link" size="small" danger>
                {{ $t('common.delete') }}
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { useTableColumns } from '../config/tableColumns'
import type { Menu } from '@/types/api/system/menu'
import { MenuType } from '@/types/api/system/menu'
import { MenuOutlined } from '@ant-design/icons-vue'

// 组件名称
defineOptions({
  name: 'MenuTable'
})

// Props定义
defineProps<{
  dataSource: Menu[]
  loading: boolean
}>()

// Emits定义
const emit = defineEmits<{
  (e: 'add', parentId: number): void
  (e: 'edit', record: Menu): void
  (e: 'delete', id: number): void
}>()

// 表格列
const columns = useTableColumns()

/**
 * 处理添加子菜单
 */
const handleAdd = (id: number | string) => {
  emit('add', Number(id))
}

/**
 * 处理编辑菜单
 */
const handleEdit = (record: Menu) => {
  emit('edit', record)
}

/**
 * 处理删除菜单
 */
const handleDelete = (id: number | string) => {
  emit('delete', Number(id))
}

/**
 * 获取图标组件
 * @param iconName 图标名称
 * @returns 图标组件
 */
const getIconComponent = (iconName?: string) => {
  if (!iconName) return MenuOutlined
  return MenuOutlined
}
</script>

<style scoped>
.menu-table-container {
  width: 100%;
  overflow-x: auto;
}
</style>